<template>
  <div class="dynamic-table-container">
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading"
      @selection-change="handleSelectionChange">
      <el-table-column v-for="(header, index) in tableHeaders" :key="header.prop || index" :prop="header.prop"
        :label="header.label" :sortable="header.sortable">
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
  <!-- 编辑浮层 -->
  <el-dialog v-model="centerDialogVisible" title="Warning" width="500" center>
    <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
      <el-form-item v-for="(value, field) in formLabelAlign" :key="field" :label="field"
        :label-position="itemLabelPosition">
        <el-input v-model="formLabelAlign[field]" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormItemProps, FormProps } from 'element-plus';
import { ro } from 'element-plus/lib/locale/index.js';
import { ref, onMounted, type PropType } from 'vue'
// 父组件传输的数据
type ColumnHeader = {
  prop: string;
  label: string;
  width: string;
  sortable?: boolean;
}
const props = defineProps({
  demoHeaders: {
    type: Array as PropType<ColumnHeader[]>,
    required: true,
  },
  demoData: {
    type: Array as PropType<any[]>,
    required: true
  }
});
// 浮层样式
const centerDialogVisible = ref(false)

const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = ref({})
// 数据的参数
const tableHeaders = ref([...props.demoHeaders])
const tableData = ref([...props.demoData])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(props.demoData.length)
const selectedRows = ref<any>([])

// 获取数据
const fetchHeaders = async () => {
  try {
    loading.value = true
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('获取表头失败:', error)
  } finally {
    loading.value = false
  }
}

const fetchTableData = async () => {
  try {
    loading.value = true
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    tableData.value = props.demoData.slice(start, end)
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 操作方法
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

const handleEdit = (row: any) => {
  console.log(row);
  centerDialogVisible.value = true
  formLabelAlign.value = row
}

const handleDelete = (row: any) => {
  console.log('删除行:', row)

}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  fetchTableData()
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchTableData()
}


onMounted(async () => {
  console.log("props.demoData" + props.demoData);
  await fetchHeaders()
  await fetchTableData()
})


defineExpose({
  refresh: fetchTableData,
  updateHeaders: (headers: any[]) => tableHeaders.value = headers
})
</script>

<style scoped>
.dynamic-table-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dynamic-table-container {
    padding: 10px;
  }

  :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
}
</style>